<template>
  <div>
    <el-dialog :title="$t('licence.map')" v-model="visible" width="60%" append-to-body :close-on-click-modal="false">
      <div  element-loading-text="正在获取当前定位" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
        <div class="form">
          <el-form v-model="form">
            <el-form-item :label="$t('licence.powe_address')">
              <el-input v-model="form.address" :placeholder="$t('licence.powe_address')" :disabled="disabled"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <baidu-map class="bm-view" :center="centerName" :zoom="zoom" @ready="initMap" @click="mapClick" scroll-wheel-zoom :ak="AK">
          <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
        </baidu-map>
      </div>
      <span slot="footer">
        <el-button @click="determine" class="button" type="primary" style="margin: 20px 0 20px 0">{{ $t('licence.determine') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
      const AK = ref('hZcI1sg4du1R9keupBDb0npiGgxv5e2G');// 密钥
      import util from '@/utils/util';
      const props = defineProps({
            // 缩放等级
            zoom: {
              type: [String, Number],
              default: 12
            },
            // 中心点这是地图的中心点
            center: {
              type: [Object],
              default:{ lng: 116.403981, lat: 39.917702 }
            }
      })
      let bmap:any = null; // 地图容器
      let Map:any = null;
      // const position = ref([]) // 点位集合
      const visible = ref(false) // 弹框控制
      const centerName = ref('')
      const form = ref({
        // 点位数据和位置信息
        lat: '',
        lng: '',
        address: '',
        POIRes: '',
      });
      const POIList = ref([])
      const locationLoading = ref(false)
      const disabled =ref(true) ; //选择地址
      const emit = defineEmits('detailAdress');
    /**
     * 初始化
     * @param position 位置
     */
    //传值 centerName 省市区(用于父组件调用)
    const init = (name:string)=> {
      // 是个数组
      // centerName = centerName.join("");
      centerName.value = name;
      nextTick(()=>{
        visible.value = true;
      })
      return true;
    };
    defineExpose({
		  init
    })
    /**
     * 初始化地图
     * BMap 地图容器
     * map 地图实例
     */
    const initMap = ({ BMap, map }) => {

      bmap = BMap;
      Map = map;
      drawPolygon(centerName.value);
    };
    const drawPolygon = (regionName:string) =>  {
      let bdary = new bmap.Boundary();
      bdary.get(regionName, function (rs:any) {
        //轮廓的总数 —— 有的区由多个封闭区域组成
        let count = rs.boundaries.length;
        if (!count) {
          console.log('未能获取到当前输入的行政区域');
          return;
        }
        for (let i = 0; i < count; i++) {
          //创建多边形覆盖物
          let ply = new bmap.Polygon(rs.boundaries[i], {
            strokeWeight: 2,
            strokeColor: 'red',
            fillOpacity: 0.5,
            strokeStyle: 'dashed',
          });
          // 给覆盖物添加点击事件
          ply.addEventListener('click', function () {
            // alert("我是:" + regionName);
            // 改变自己的透明度
            // setFillOpacity(0.6)
          });
          //添加覆盖物
          Map.addOverlay(ply);
        }
      });
    };
    // 确定按钮事件
    const determine = ()=> {
      // 这里要不要判断一下有没有选择地址呢
      // 这里判断一下
      if (form.value.address) {
        // 子: $emit("自定义事件名1", 传值1)
        emit('detailAdress', form.value.address, form.value.lat, form.value.lng);
        // 关闭
        visible.value = false;
      } else {
        ElMessage.error('请选择地址');
      }
    };
    // 地图点击事件
    const mapClick = (e:any)=> {

      // 获取点击的点位
      form.value.lng = e.point.lng;
      form.value.lat = e.point.lat;
      // 添加maker点
      let pointer = {
        lng: e.point.lng,
        lat: e.point.lat,
      };
      addPointer(bmap, Map, pointer);
      // 添加label 地图上显示经纬度
      // addLabel(bmap, Map, `${pointer.lng} . ${pointer.lat}`, {
      //   lng: pointer.lng,
      //   lat: pointer.lat,
      // });
      // 解析地址
      getLocationAddress(form.value.lng, form.value.lat, function (result:any) {
        form.value.address = result.address;
        disabled.value = false;
      });
    };
    /**
     * 逆地址解析
     * lng 经度
     * lat 纬度
     */
    const getLocationAddress = (lng:any, lat:any, cb:any)=> {
      const that = this;
      let myGeo = new bmap.Geocoder();
      //   debugger;
      // 根据坐标得到地址描述
      myGeo.getLocation(new bmap.Point(lng, lat), function (result:any) {
        if (result) {
          console.log(' 地址解析', result);
          POIList.value = result.surroundingPois;
          cb && cb(result);
        }
      });
    };
    /**
     * 添加点
     * @param BMap
     * @param map
     * @param lng 经度
     * @param lat 纬度
     * @param icon 图标
     * @param offX x偏移
     * @param offY y偏移
     */
    const addPointer = (BMap:any, map:any, { lng, lat, icon = 'mapadd.png', offX = 30, offY = 20 } = {})=> {
      // 清除marker
      map.clearOverlays();
      // 创建点位
      let point = new bmap.Point(lng, lat);
      // 创建标注
      let marker = new bmap.Marker(point);
      // 创建icon
      let iconPath = util.getAssetsFile(icon);
      // let iconPath = `/@/assets/images/${icon}`
      //   debugger
      let myIcon = new bmap.Icon(iconPath, new bmap.Size(100, 100), {
        imageOffset: new bmap.Size(offX, offY), // 设置图片偏移
      });
      // 设置icon
      marker.setIcon(myIcon);
      // 添加点位
      map.addOverlay(marker);
    };
    /**
     * 添加标注
     * @param BMap
     * @param map
     * @param text label内容
     * @param lng 经度
     * @param lat 纬度
     * @param icon 图标
     * @param offX x偏移
     * @param offY y偏移
     */
    // 定位当前位置
    const getLocation = (cb:any)=> {

      let geolocation = new bmap.Geolocation();
      geolocation.getCurrentPosition(function (r:any) {
        if (r.point && r.point.lat) {
          let { lng, lat } = r.point;
          // 修改中心点
          Map.panTo(r.point);
          // 添加marker
          addPointer(bmap, Map, { lng, lat });
          //添加label 地图上显示经纬度
          // addLabel(
          //   bmap,
          //   Map,
          //   `${r.point.lng} . ${r.point.lat}`,
          //   { lng, lat }
          // );
          //    关闭加载
          locationLoading.value = false;
          cb && cb(r);
        } else {
          alert('failed: 定位失败');
        }
      });
    };
</script>

<style scoped lang="scss">
.bm-view {
  width: 100%;
  height: 500px;
}
// 按钮
.el-button--primary {
  color: #ffffff;
  background-color: #305add;
  border-color: #305add;
  width: 60px;
  height: 30px;
}
.button {
  position: relative;
}
</style>
